<template>
  <div class="content">
    <div class="main">
      <div v-if="!isupload">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>

      <quill-editor
        class="editor"
        v-model="contentNew"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div>
  </div>
</template>
 
<script>
import hljs from "highlight.js";
import "highlight.js/styles/dracula.css";

/**
 * 富文本vue-quill-editor 组件
 * name wangkai
 *-------------------设置文档----------------
 *---------- 1、toolbar工具栏-模块名----------
 *  background  --------------  背景颜色
 *  bold  --------------------  加粗
 *  color --------------------  颜色
 *  font  --------------------  字体
 *  code  --------------------  内联代码
 *  italic  ------------------  斜体
 *  link  --------------------  链接
 *  size  --------------------  大小
 *  strike  ------------------  删除线
 *  script  ------------------  上标/下标
 *  underline  ---------------  下划线
 *  blockquote  --------------  引用
 *  header  ------------------  标题
 *  indent  ------------------  缩颈
 *  list  --------------------  列表
 *  align  -------------------  文本对齐
 *  direction  ---------------  文本方向
 *  code-block  --------------  代码块
 *  formula  -----------------  公式
 *  image  -------------------  图片
 *  video  -------------------  视频
 *  clean  -------------------  清除字体样式
 */

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: "ordered" }, { list: "bullet" }], //列表
  [{ script: "sub" }, { script: "super" }], // 上下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向

  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ font: [] }], //字体
  [{ align: [] }], //对齐方式

  ["clean"], //清除字体样式
  ["image", "video"], //上传图片、上传视频
];

export default {
  name: "About",
  props: {
    content:String,
  },
  data() {
    return {
      msg: "this is about info",
      contentNew: this.content,
      isupload: true,
      fileList: [],
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
              image: function (value) {
                console.log("handlers-image");
                console.log(value);
                if (value) {
                  document.querySelector("#uploadid").click();
                  // $("#uploadid").trigger("click");
                  // document.querySelector("#upload").click(); // 劫持原来的图片点击按钮事件
                  // this.isupload = !this.isupload;
                  // console.log("this.isupload");
                  // console.log(this.isupload);
                  // this.isuploadIter()
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
          
        },
      },
    };
  },
  methods: {
    isuploadIter() {
      this.isupload = !this.isupload;
    },
    onEditorBlur(e) {
      console.log("onEditorBlur");
      console.log(e);

      // let reg=new RegExp('=','g')//g代表全部
      //           let newMsg=this.content.replace(reg,'&&&');let reg=new RegExp('=','g')//g代表全部
      //           let newMsg=JSON.stringify(msg).replace(reg,'&&&');
    },
    onEditorFocus(e) {
      //获得焦点事件
      // console.log("onEditorFocus");
      // console.log(e);
    },
    onEditorChange(e) {
      //内容改变事件
      // console.log("onEditorChange");
      // console.log(e);
      this.$parent.updateCopntent(this.contentNew);
      // this.$emit("updateCopntent",this.contentNew);
    },
    handlePreview(e) {
      // console.log('handlePreview');
      // console.log(e);
    },
    handleRemove(e) {
      // console.log('handleRemove');
      // console.log(e);
    },
    beforeRemove(e) {
      // console.log('beforeRemove');
      // console.log(e);
    },
    handleExceed(e) {
      
      // console.log('handleExceed');
      // console.log(e);
      
    // },updateCopntent(){
    //   this.$emit("updateCopntent",this.contentNew);
    }
  },
};
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.editor{
  height: 25em;
}
</style>
